@import "~fullpage.js/dist/jquery.fullpage.css";
@import url(https://fonts.googleapis.com/css?family=Titillium+Web);

$body-color: #333;

$menu-color: #000;
$menu-color-hover: rgba(255, 255, 255, .8);
$menu-color-background: rgba(255, 255, 255, .5);
$menu-color-active: #fff;
$menu-color-active-background: rgba(0, 0, 0, .5);

$section-code-background: rgba(255, 255, 255, .1);

$welcome-section-degree: 90deg;
$welcome-section-first-color: rgba(255, 177, 0, 0.2);
$welcome-section-second-color: rgba(52, 0, 255, 0.4);

$install-section-degree: 90deg;
$install-section-first-color: rgba(32, 255, 0, .2);
$install-section-second-color: $welcome-section-second-color;

$usage-section-degree: 90deg;
$usage-section-first-color: rgba(145, 255, 1, .2);
$usage-section-second-color: $install-section-second-color;

$slides-section-degree: 90deg;
$slides-section-first-color: rgba(255, 155, 0, .2);
$slides-section-second-color: $usage-section-second-color;

$start-use-it-now-section-degree: 45deg;
$start-use-it-now-section-first-color: rgba(255, 255, 255, .2);
$start-use-it-now-section-second-color: $slides-section-second-color;

body {
  font-family: 'Titillium Web', Arial sans-serif;
  color: $body-color;
}

h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  font-size: 100%;
  margin: 0;
  padding: 0;
  color: #444;
}

h1 {
  font-size: 3em;
}

h4 {
  font-size: 1.3em;
}

#fp-nav {
  top: 50% !important;
}

.menu-wrapper {
  position: fixed;
  width: 100%;
  z-index: 70;
  text-align: center;
  height: 40px;
  margin: auto;
}

.menu {
  padding: 0;
}

.menu li {
  display: inline-block;
  margin: 10px;
  color: $menu-color;
  background: $menu-color-active;
  background: $menu-color-background;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  text-align: center;
}

.menu li.active {
  background: #666;
  background: $menu-color-active-background;
  color: $menu-color-active;
}

.menu li a {
  text-decoration: none;
  color: $menu-color;
}

.menu li.active a:hover {
  color: $menu-color;
}

.menu li:hover {
  background: $menu-color-hover;
}

.menu li a,
.menu li.active a {
  padding: 9px 18px;
  display: block;
}

.menu li.active a {
  color: $menu-color-active;
}

.section {
  text-align: center;
}

.section pre {
  margin-top: 5px;
  text-align: start;
}

.section pre code {
  background: $section-code-background !important;
  font-weight: normal;
  font-size: 1.2em;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, .2), 0 6px 20px 0 rgba(0, 0, 0, .19);
  padding: 25px;
}

.code-block {
  margin: auto;
  display: inline-block;
}

.code-block code {
  font-size: 1em !important;
}

button {
  display: inline-block;
  margin: 10px;
  color: $menu-color;
  background: $menu-color-active;
  background: $menu-color-background;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  text-align: center;
  padding: 7px 50px;
  border-color: white;
  background: rgba(255, 255, 255, 0.1);
}

.welcome-section {
  background: linear-gradient($welcome-section-degree, $welcome-section-first-color, $welcome-section-second-color);
}

.welcome-section .logo-image {
  margin: 25px;
}

.install-section {
  background: linear-gradient($install-section-degree, $install-section-first-color, $install-section-second-color); /* Standard syntax */
}

.usage-section {
  background: linear-gradient($usage-section-degree, $usage-section-first-color, $usage-section-second-color); /* Standard syntax */
}

.slides-section {
  background: linear-gradient($slides-section-degree, $slides-section-first-color, $slides-section-second-color); /* Standard syntax */
}

.start-use-it-now-section {
  background: linear-gradient($start-use-it-now-section-degree, $start-use-it-now-section-first-color, $start-use-it-now-section-second-color); /* Standard syntax */
}
